<template><div>
  <nav-bar name="We重邮"> </nav-bar>
  <div v-if="userInfo">
    
      <div>
          
           <div class="user"> 
               <div class="userInfo">
            <div class="userimg" ><img :src="userInfo.img" alt=""></div>
            
            <div>
              <div><span>{{userInfo.name}}</span></div>
              <div><span>{{userInfo.Sno}}</span></div>
            </div>
               <div>
                 <span>{{getDate}}</span>
               </div>
          </div>
          <div class="jtInfo">
            <div>性别:{{userInfo.sex}}</div>
            <div>统一识别码:{{userInfo.id}}</div>
            <div>年级:{{userInfo.grade}}级</div>
            <div>学院:{{userInfo.college}}</div>
            <div>班级:{{userInfo.class}}</div>
            <div>专业:{{userInfo.major}}</div>
          </div>
          <div class="setInfo">
            <van-icon name="label-o" color="green"  size="2rem"/>
            <span>完善信息</span>
            </div>
           </div>
           <div class="other">
            <div><van-icon name="service" color="rgb(111,209,222)" size="2rem"  />在线客服</div>
           <div @click="$router.push('/feedback')"><van-icon name="comment-o" color="rgb(244,184,72)" size="2rem" />反馈</div>
           <div> <van-icon name="warning-o" color="rgb(113,222,230)" size="2rem"/>关于</div>
           </div>
            
              <div class="button" @click="reLogin">切换绑定</div>
         
            
      </div>
       <tab-bar></tab-bar>
  </div>
</div>

</template>

<script>
import tabBar from '@/components/tabBar'
import navBar from '@/components/navbar'
export default {
  data() {
    return {
       userInfo:null
    }
  },
  created() {
     this.$http.get('/userinfo',{
       params:{
       id:localStorage.getItem('id'),
       }}).then(res=>{
       console.log(res);
       this.userInfo=res.data.userInfo
     })

  },
  components:{
    tabBar,
    navBar
  },
  methods: {
    reLogin(){
      localStorage.clear()
      this.$router.push('/login')
    }
  },
   computed:{
     getDate(){
           const date=new Date()
           var day=date.getDate()
          var year= date.getFullYear()
          var month =date.getMonth( )
          var week= date.getDay()
          return  `${year}-${year+1}学年1学期 ${month+1}-${day} 星期${week}`
     }
   }
}

</script>
<style scoped>
.userInfo{
  border-top: 1px solid rgba(174,174,174,.2);
  display: flex;
  margin-top: 20px;
  background-color: white;
}
.userInfo .userimg{
  padding: 10px;
}
  .userInfo img{
    width: 60px;
    height: 60px;
    border-radius: 10px;
  }
  .userInfo div:nth-child(2)
  { 
    margin-top: 13px;
  }
  .userInfo div:nth-child(3){
    margin-top: 20px;
    margin-left: 60px;
    width: 150px;
    font-size: 16px;
    color: rgb(174,174,174)
  }
  .jtInfo{
    display: flex;
    flex-wrap: wrap;
    font-size: 15px;
      color: rgb(139,139,139);
      padding: 10px;
      border-bottom: 1px solid rgba(139,139,139,.2);
      background-color: white;
  }
  .jtInfo div {
    margin-top: 5px;
  }
  .jtInfo div:nth-child(2n+1){
    width: 140px;
    margin-right: 10px;

  }
  
  .setInfo{
    background-color: white;
    height: 50px;
     display: flex;
     align-items: center;
       border-bottom: 1px solid rgba(139,139,139,.2);
       margin-bottom: 20px;
   padding-left: 10px;
  }
  .setInfo i{
      margin-right: 10px;
  }
  .other div {
    padding-left: 10px;
    height: 40px;
    background-color: white;
    margin-bottom: 20px;
      display: flex;
     align-items: center;
  }
  .other div i {
    margin-right: 10px;
  }
  .button {

    background-color: rgb(237,119,95);
    color: aliceblue;
    padding: 15px;
    text-align: center;
    width: 90%;
    margin: 47px auto;
    border-radius: 25px;
    font-size: 20px;
  }
</style>